<template>
  <div class="wrap">
    <div class="flex-center">
      <Title title="关联合同" style="font-size:16px; margin:16px 0"/>
      <PlainCreateBtn v-if="!isRevoke" size="small" @click="handleContract">关联合同</PlainCreateBtn>
    </div>
    <el-table :data="data">
      <EmptyPlaceholder slot="empty" mode="table" />
      <el-table-column label="项目名称">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.contractName" is-can-click @handelClick="toContractDetail(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="合同编号" min-width="150">
        <template slot-scope="scope">
          <div>{{ scope.row.contractCode || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="合同类型" min-width="130">
        <template slot-scope="scope">
          <div>{{ scope.row.contractType | contractType }}</div>
        </template>
      </el-table-column>
      <el-table-column label="申请人" width="130">
        <template slot-scope="scope">
          <CheckUserInfo :user-id="scope.row.proposerId" :label="scope.row.proposer" />
        </template>
      </el-table-column>
      <el-table-column label="申请人部门">
        <template slot-scope="scope">
          <div>{{ scope.row.proposerDepartment || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="!isRevoke" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDeleteContract(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <RelatedContract
      ref="relatedContractRef"
      :visible.sync="showRelatedContract"
      exclude-cancel
      @confirmRelatedContract="confirmRelatedContract"
    />
  </div>
</template>
<script>
import Title from '@/components/Title';
import RelatedContract from '@/components/CreateOrder/relatedContract';
import { associateContractRenewal, deleteContract } from '@/api/termination';
import ElMessage, { showModal } from '@/utils/message';
import { contractType } from '@/filters/status';
import { CONTRACT_TYPE } from '@/utils/const/contract';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { encryption } from '@/utils';

export default {
  components: { Title, RelatedContract, EmptyPlaceholder },
  filters: { contractType },
  props: {
    id: {
      type: Number | String,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    isRevoke: { // 是否作废
      type: Boolean,
      default: false
    },
    isEdit: { // 是否创建/编辑
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showRelatedContract: false
    };
  },
  methods: {
    handleContract() {
      this.showRelatedContract = true;
      this.$refs['relatedContractRef'].filterInput = { contractType: CONTRACT_TYPE.KOL };
      this.$refs['relatedContractRef'].init();
      this.data && this.$refs['relatedContractRef'].initSelectData(this.data);
    },
    confirmRelatedContract(data) {
      if (!this.isEdit) {
        if (!data.length) return;
        showModal('确认关联合同吗？').then(() => {
          const params = {
            id: this.id,
            contractId: data.map(item => {
              return item.id;
            }).join(',')
          };
          associateContractRenewal(params).then(res => {
            res.code === 200 && ElMessage.success('关联成功');
            this.showRelatedContract = false;
            this.$emit('freshData');
          }).catch(() => {
            this.showRelatedContract = false;
          });
        });
      } else {
        this.$emit('confirmRelatedContract', data);
        this.showRelatedContract = false;
      }
    },
    handleDeleteContract(val) {
      if (!this.isEdit) {
        showModal('确认取消关联合同吗？').then(() => {
          const params = {
            id: this.id,
            contractId: val
          };
          deleteContract(params).then(res => {
            if (res.code === 200) {
              ElMessage.success('取消关联成功');
              this.$emit('freshData');
            }
          }).catch(_ => _);
        });
      } else {
        this.$emit('handleDeleteContract', val);
      }
    },
    toContractDetail(row) {
      const url = this.$router.resolve({
        name: 'contractDetail',
        params: {
          id: encryption(row.id)
        },
        query: {
          processId: encryption(row.processId)
        }
      });
      window.open(url.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  margin-top: 24px;
  .light-word {
    color: #406eff;
    cursor: pointer;
  }
}
</style>
